<template>
    <div style="padding: 10px">


      <!--表格事件-->

      <div class="home" style="margin: 10px">

        <el-table :data="tableData" :row-class-name="tableRowClassName" header-cell-class-name="headerBg" size="medium"
                  style="width: 100%" @selection-change="handleSelectionChange">

          <el-table-column type="expand">

            <template slot-scope="props">

              <el-form class="demo-table-expand" inline label-position="left">

                <el-form-item label="教师归属院">

                  <span>{{ props.row.teacherDepartmentName }}</span>

                </el-form-item>

                <el-form-item label="开结课时间">

                  <span>{{ props.row.startEndTime }}</span>

                </el-form-item>

                <el-form-item label="教师性别">

                  <span>{{ props.row.teacherGender }}</span>

                </el-form-item>

                <el-form-item label="上课时间">

                  <span>{{ props.row.goCourseTime }}</span>

                </el-form-item>

                <el-form-item label="上课地点">

                  <span>{{ props.row.classroomPlace }}</span>

                </el-form-item>

                <el-form-item label="本课学分">

                  <span>{{ props.row.courseCredit }}</span>

                </el-form-item>

                <el-form-item label="本课课时">

                  <span>{{ props.row.courseHour }}</span>

                </el-form-item>

              </el-form>
            </template>
          </el-table-column>
          <el-table-column
              label="课程编号"
              prop="courseId"
              sortable>
          </el-table-column>
          <el-table-column
              label="课程名"
              prop="courseName">
          </el-table-column>
          <el-table-column
              label="类型"
              prop="courseType">
          </el-table-column>
          <el-table-column
              label="课程归属院"
              prop="departmentName">
          </el-table-column>
          <el-table-column
              label="课程归属专业"
              prop="professionName">
          </el-table-column>
          <el-table-column
              label="授课教师"
            prop="teacherName">
        </el-table-column>
        <el-table-column
            label="分数"
            prop="courseScore">
        </el-table-column>


        <!-- <el-table-column label="操作">
<template slot-scope="scope">
    <el-popconfirm v-if="showReturnCourse" cancel-button-text="我在想想哈" icon-color="red" title="确定退课吗?" @confirm="returnCourse(scope.$index, scope.row.courseId)">

        <el-button slot="reference" icon="el-icon-remove" size="small" style="margin-left: 6px" type="danger">退课

        </el-button>

    </el-popconfirm>
</template>
        </el-table-column> -->


      </el-table>

      <div style="margin: 10px 0">
        <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :page-sizes="[5, 7,10, 20]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
        </el-pagination>

      </div>
    </div>

  </div>
</template>

<script>
import request from '@/utils/request';
export default {
  name: "StuHasChoose",
  components: {},

  //页面初始方法  调用生命周期
  created() {
    this.load()
  },
  methods: {
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1)
      }
    },
    // resetForm(formName) {
    //   this.$refs[formName].resetFields();
    // },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        value: '',
        key: Date.now()
      });
    },


    importSuccess() {
      this.$message.success("文件导入成功！")
      this.load()
    },
    exp() {
      // window.open("/department/export")
      location.href = "http://localhost/userstudent/export"
    },
    reset() {
      this.searchId = '';
      this.searchName = '';
      this.load()
    },
    removeBatchByIds() {
      // console.log(this.multipleSelection.map(v => v.professionId))
      let ids = this.multipleSelection.map(v => v.professionId)
      request.delete("/userstudent/delbatch/" + ids).then(res => {
        this.$notify({
          title: '成功',
          message: '批量删除成功！',
          type: 'success'
        });
        this.load()
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;

    },

    handleSizeChange(val) {
      this.pageSize = val
      this.load()
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.load()
      console.log(`当前页: ${val}`);
    },

    load() {
      // let timer = setTimeout(() => {
      //   alert("你好")
      // },2000)
      //获取后端定时器
      request.get("/userstudent/scheduleselect").then(res => {
        // console.log(res.data)
        // console.log(this.user.userId)
        if (res.data.includes(this.user.userId)) {
          this.$confirm('由于你的选课中个别科目选课人数过少，达不到教师上课人数（当选课人数>=班级容量的1/2为有效选课），现请你重新更改选课科目', '提示', {
            confirmButtonText: '确定',
            type: 'error'
          }).then(() => {
            this.$router.push('/stuhaschoose')
            this.$message({
              type: 'error',
              message: '请及时更改选课!'
            });
          }).catch(() => {
            this.$message({
              type: 'error',
              message: '请及时更改选课!'
            });
          });

        }
      })


      request.get("/userstudent/haschoosepage", {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          studentId: JSON.parse(localStorage.getItem("user")).userId,
          searchId: this.searchId,
          searchName: this.searchName
        }
      }).then(res => {
        this.tableData = res.records
        this.total = res.total
        console.log(res.records)
        for (let i = 0; i < this.tableData.length; i++) {

          this.tag = this.tableData[i].courseChooseNumber + "/" + this.tableData[i].classSeatNumber
        }
      })
    },


    returnCourse(index, courseId) {
      const studentId = JSON.parse(localStorage.getItem("user")).userId;
      request.put("/userstudent/returncourse/" + studentId + "/" + courseId).then(res => {
        this.$notify({
          title: '成功',
          message: '退课成功！',
          type: 'success'
        });
        this.load()
      })
    },

    addClass() {
      // this.showChooseCourse=false
      // this.showReturnCourse=true

      // this.beforeSaveFindDep()
      // this.form = {}
      // this.addDialogFormVisible = true
    },

    addHandleClose(done) {
      // this.$confirm('确认关闭？')
      //     .then(_ => {
      //       done();
      //     })
      //     .catch(_ => {
      //     });
      this.addDialogFormVisible = false
    },
    editHandleClose(done) {
      // this.$confirm('确认关闭？')
      //     .then(_ => {
      //       done();
      //     })
      //     .catch(_ => {
      //     });
      this.editDialogFormVisible = false
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex == 1) {
        return 'warning-row';
      } else if (rowIndex % 2 == 0) {
        return 'success-row';
      }
      return '';
    },
  },
  data() {
    return {
      user: JSON.parse(localStorage.getItem("user")),
      tag: 1,
      showChooseCourse: true,
      showReturnCourse: true,

      //为查询出的院系下拉框
      options: [],
      multipleSelection: [],
      tableData: [],
      searchId: '',
      searchName: '',
      pageSize: 7,
      total: 10,
      currentPage: 1,
      visible: false,
      addDialogFormVisible: false,
      editDialogFormVisible: false,
      dynamicValidateForm: {
        domains: [{}],
      },
      form: {


        courseId: "",
        courseName: "",
        // teacherId: "",
        // classId: "",
        courseChooseNumber: '',
        startEndTime: '',
        goCourseTime: '',
        courseCredit: '',
        courseHour: ''
      },
      // rules: {
      //
      //   departmentName: [
      //     {required: true, message: '请输入学院名', trigger: 'blur'},
      //     {pattern: /^[\w\u4e00-\u9fa5]+$/, message: '包含特殊字符', trigger: 'blur'},
      //     {pattern: /^[a-zA-Z]+$|^[\u4e00-\u9fa5]+$/, message: '只能全中文或全英文', trigger: 'blur'},
      //
      //   ]
      // },

      // tableData: [{
      //   classId: '4',
      //   departmentName: '发的',
      //   professionName: 'fg4555',
      //   className: 'hg的',
      //   classSeatNumber: '10'
      // }],
      // tableData: []
    };
  }

}
</script>

<style>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.headerBg {
  background: #eee !important;
}
</style>
